// 请求jsonp
$("#txt").on("input", function () {
    $.ajax({
        url: "https://suggest.taobao.com/sug",
        data: {
            code: "utf-8",
            q: $(this).val(),
            _ksTS: "1636342415828_460"
        },
        success: res => {
            let str = "";
            res.result.forEach(val => {
                str += `<li>${val[0]}</li>`
            });
            $(".myList").css("display", "block");
            $(".myList").html(str);
            if (this.value === "") {
                $(".myList").css("display", "none")
            }
            // console.log(res.result);
        },
        dataType: "jsonp",
        jsonp: "callback"
    })
})
$(document).on("click", function () {
    $(".myList").css("display", "none")
})

// 面向对象的轮播图

function Banner() {
    // 1. 选择元素
    this.left = document.getElementById("left");
    this.right = document.getElementById("right");
    this.imgbox = document.querySelector(".imgbox");
    this.items = this.imgbox.children;

    // 默认索引
    this.index = 0;

    // 动态计算imgbox的宽度 = 图片的个数 * 任一图片的宽度
    this.imgbox.style.width = this.items.length * this.items[0].offsetWidth + "px";

    // 2. 执行绑定事件
    this.addEvent();
}
Banner.prototype.addEvent = function () {
    const that = this;
    // 实现绑定事件
    this.left.onclick = function () {
       
        that.changeIndexLeft();
    }
    this.right.onclick = function () {
        // 3. 执行计算索引
        that.changeIndexRight();
    }
}
Banner.prototype.changeIndexLeft = function () {
    if (this.index === 0) {
        this.index = this.items.length - 2;
        this.imgbox.style.left = -(this.items.length - 1) * this.items[0].offsetWidth + "px";
    } else {
        this.index--;
    }
    this.changeItem()
}
Banner.prototype.changeIndexRight = function () {
    // 实现索引的计算
    if (this.index === this.items.length - 1) {
        // 无缝轮播图2：因为第一张图和最后一张图一样，所以点击之后真正要显示的是第二张图
        this.index = 1;
        // 无缝轮播图3：同一瞬间，将imgbox的位置，初始化
        this.imgbox.style.left = 0;
    } else {
        this.index++;
    }
    // 4. 执行切换图片功能
    this.changeItem()
}
Banner.prototype.changeItem = function () {
        move(this.imgbox, {
            left: -this.index * this.items[0].offsetWidth
        })

}
// jq的trigger插件，动起来
t= setInterval(()=>{
    $("#right").trigger("click");
},8000)

new Banner();



// 楼层开始

$(".floor").children("li").click(function(){
    const index = $(this).index();
    const now = $(".floor").eq(index);
    // const t = now.offset().top;
    console.log(now.offset());
    // index();这个方法可以获取当前点击的是第几个
    $("html").animate({
            scrollTop: $(".lc").eq($(this).index()).offset().top
        })
})
$(document).on("scroll", function(){
    if($(document).scrollTop() >= 0){
        $(".floor").children("li").eq(0).css("color","#e00").siblings().css("color","")
    }
    if($(document).scrollTop() >= 700){
        $(".floor").children("li").eq(1).css("color","#e00").siblings().css("color","")
    }
    if($(document).scrollTop() >= 1100){
        $(".floor").children("li").eq(2).css("color","#e00").siblings().css("color","")
    }
    if($(document).scrollTop() >= 1550){
        $(".floor").children("li").eq(3).css("color","#e00").siblings().css("color","")
    }
    if($(document).scrollTop() >= 2000){
        $(".floor").children("li").eq(4).css("color","#e00").siblings().css("color","")
    }
})
// 楼层结束


// 返回首页登陆状态改变
const headerLeft = document.querySelector(".header-left");
const headerLeft1 = document.querySelector(".header-left1");
const un = document.querySelector(".login1");
const quit = document.querySelector(".register1");
// 这是给去购物车加的
// const goCart = document.querySelector("#goCart");

if(localStorage.getItem("isLogin") === "ok"){
    headerLeft.style.display = "none";
    headerLeft1.style.display = "block";
    un.innerHTML = localStorage.getItem("username")
}else{
    headerLeft.style.display = "block";
    headerLeft1.style.display = "none";
}

quit.onclick = function(){
    localStorage.setItem("isLogin", "");
    localStorage.setItem("username", "");
    un.innerHTML = "";
    headerLeft.style.display = "block";
    headerLeft1.style.display = "none";
}


// 二级菜单
// const c = document.querySelector(".c");
// const b = document.querySelector(".b");
// c.onmouseover = function(){
//     b.style.display = "block";
// }
// c.onmouseout = function(){
//     b.style.display = "none";
// }